<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.tran1 {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }

        div.tran1:hover {
            width: 300px;
        }

        div.tran2 {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s, height 4s;
        }

        div.tran2:hover {
            width: 300px;
            height: 300px;
        }

        /*    */

        div.animated_div {
            width: 60px;
            height: 40px;
            background: #92B901;
            color: #ffffff;
            font-weight: bold;
            font-size: 1.5em;
            text-align: center;
            padding: 10px;
            margin: 5px;
            transition-property: width, height, background, font-size, opacity;
            transition-duration: 1s, 1s, 1s, 1s, 1s;
            border-radius: 5px;
            opacity: 0.4;
        }

        div.animated_div:hover {
            opacity: 1;
            background: #1ec7e6;
            width: 120px;
            height: 80px;
            font-size: 3.5em;
        }
    </style>
</head>
<body>
<h1>CSS Transitions</h1>
鼠标悬浮在以下div时，在2秒内宽度带过渡效果扩展 <br>
<div class="tran1"></div>
<hr>
宽度按2秒，高度按4秒，过渡扩展 <br>
<div class="tran2"></div>
<hr>
结合高宽背景色字体尺寸透明度的多项过渡效果 <br>
transition-property属性值与transition-duration值一一对应 <br>
<div class="animated_div">BO</div>

</body>
</html>